// BMIView.vue
<script setup>
import { ref, computed } from 'vue'

const height = ref('')
const weight = ref('')
const age = ref('')
const gender = ref('male')

const bmi = computed(() => {
  if (!height.value || !weight.value) return null
  
  const heightInMeters = parseFloat(height.value) / 100
  const weightInKg = parseFloat(weight.value)
  
  if (heightInMeters <= 0 || weightInKg <= 0) return null
  
  return (weightInKg / (heightInMeters * heightInMeters)).toFixed(1)
})

const bmiCategory = computed(() => {
  if (!bmi.value) return ''
  
  const bmiValue = parseFloat(bmi.value)
  
  if (bmiValue < 18.5) return '体重过轻'
  if (bmiValue < 24) return '正常范围'
  if (bmiValue < 28) return '超重'
  if (bmiValue < 32) return '肥胖'
  return '重度肥胖'
})

const idealWeight = computed(() => {
  if (!height.value) return null
  
  const heightInMeters = parseFloat(height.value) / 100
  const standardBMI = gender.value === 'male' ? 22 : 21
  
  return (standardBMI * heightInMeters * heightInMeters).toFixed(1)
})

const resetForm = () => {
  height.value = ''
  weight.value = ''
  age.value = ''
  gender.value = 'male'
}
</script>

<template>
  <div class="bmi-calculator">
    <h1>BMI 计算器</h1>
    
    <div class="input-group">
      <label for="height">身高 (cm)</label>
      <input 
        id="height" 
        v-model.number="height" 
        type="number" 
        min="100" 
        max="250" 
        placeholder="请输入身高"
      >
    </div>
    
    <div class="input-group">
      <label for="weight">体重 (kg)</label>
      <input 
        id="weight" 
        v-model.number="weight" 
        type="number" 
        min="30" 
        max="200" 
        placeholder="请输入体重"
      >
    </div>
    
    <div class="input-group">
      <label for="age">年龄 (可选)</label>
      <input 
        id="age" 
        v-model.number="age" 
        type="number" 
        min="2" 
        max="120" 
        placeholder="请输入年龄"
      >
    </div>
    
    <div class="input-group">
      <label>性别</label>
      <div class="gender-options">
        <label>
          <input 
            type="radio" 
            v-model="gender" 
            value="male"
          >
          男
        </label>
        <label>
          <input 
            type="radio" 
            v-model="gender" 
            value="female"
          >
          女
        </label>
      </div>
    </div>
    
    <div class="button-group">
      <button @click="resetForm">重置</button>
    </div>
    
    <div v-if="bmi" class="result">
      <h2>计算结果</h2>
      <p>您的 BMI 值: <strong>{{ bmi }}</strong></p>
      <p>状态: <strong :class="bmiCategory">{{ bmiCategory }}</strong></p>
      <p v-if="idealWeight">理想体重范围: <strong>{{ idealWeight }} kg 左右</strong></p>
      
      <div class="bmi-chart">
        <h3>BMI 参考值</h3>
        <ul>
          <li>体重过轻: BMI &lt; 18.5</li>
          <li>正常范围: 18.5 ≤ BMI &lt; 24</li>
          <li>超重: 24 ≤ BMI &lt; 28</li>
          <li>肥胖: 28 ≤ BMI &lt; 32</li>
          <li>重度肥胖: BMI ≥ 32</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bmi-calculator {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, #f9f9f9 0%, #eef2f5 100%);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
  font-weight: 600;
  background: linear-gradient(to right, #42b983, #2c3e50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding-bottom: 0.5rem;
}

h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  background: linear-gradient(to right, #42b983, #2c3e50);
  border-radius: 3px;
}

h2 {
  color: #2c3e50;
  text-align: center;
  margin: 1.5rem 0 1rem;
  font-size: 1.8rem;
}

h3 {
  color: #2c3e50;
  margin: 1rem 0 0.5rem;
  font-size: 1.3rem;
}

.input-group {
  margin-bottom: 1.5rem;
  position: relative;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #34495e;
  font-size: 1rem;
}

input[type="number"] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #dfe6e9;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type="number"]:focus {
  border-color: #42b983;
  box-shadow: 0 0 0 3px rgba(66, 185, 131, 0.2);
  outline: none;
}

input[type="number"]::placeholder {
  color: #b2bec3;
}

.gender-options {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.gender-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: rgba(66, 185, 131, 0.1);
}

.gender-options label:hover {
  background-color: rgba(66, 185, 131, 0.2);
}

input[type="radio"] {
  accent-color: #42b983;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.button-group {
  text-align: center;
  margin: 2rem 0;
}

button {
  padding: 12px 30px;
  background: linear-gradient(135deg, #42b983 0%, #3498db 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #3aa876 0%, #2980b9 100%);
}

button:active {
  transform: translateY(0);
}

.result {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.result p {
  margin: 12px 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.result strong {
  font-weight: 600;
}

.bmi-chart {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #42b983;
}

.bmi-chart ul {
  padding-left: 1.5rem;
  color: #34495e;
  line-height: 1.6;
}

.bmi-chart li {
  margin-bottom: 8px;
  position: relative;
}

.bmi-chart li::before {
  content: '•';
  color: #42b983;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* BMI 状态颜色 */
.体重过轻 {
  color: #f39c12;
  background-color: rgba(243, 156, 18, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.正常范围 {
  color: #27ae60;
  background-color: rgba(39, 174, 96, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.超重 {
  color: #e67e22;
  background-color: rgba(230, 126, 34, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.肥胖 {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.重度肥胖 {
  color: #c0392b;
  background-color: rgba(192, 57, 43, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 700;
}
</style>